<div id="ff-drop">
	<span id="ff-toggle">F<sup>2</sup></span>
	
	<div id="ff-selector">
		<h6>Selector</h6>
		<form action="" method="get">
			<ol>
				<li><input type="radio" name="jq-select" checked="checked" id="jq1"><label for="jq1">body</label></li>
				<li><input type="radio" name="jq-select" id="jq2"><label for="jq2">h1,h2,h3,h4,h5,h6</label></li>
				<li><input type="radio" name="jq-select" id="jq3"><label for="jq3">p</label></li>
				<li><input type="radio" name="jq-select" id="jq4"><input type="text" name="ff-blah" value="roll your own" id="ff-blah"></li>
			</ol>
		</form>
		<p>Roll your own selector using <a href="http://api.jquery.com/category/selectors/">jQuery selectors</a>.</p>
	</div>
	
	<div id="ff-font-family">
		<h6>Font Family</h6><div id="ff-badges"></div>
		<ul id="ff-font-family-sans" data-ff="fontFamily">
			<li>Arial</li>
			<li>Verdana</li>
			<li>Tahoma</li>
			<li class="core">Trebuchet MS</li>
			<li>Helvetica</li>			
			<li>Helvetica Neue</li>
			<li>Gill Sans</li>		
			<li>Century Gothic</li>
			<li>Lucida Grande</li>			
			<li>Lucida Sans Unicode</li>
			<li>Calibri</li>
			<li>Corbel</li>
			<li>Candara</li>
			
		</ul>
		<ul id="ff-font-family-serif" data-ff="fontFamily">
			<li>Times New Roman</li>			
			<li class="core">Georgia</li>
			<li>Times</li>
			<li>Palatino</li>
			<li>Palatino Linotype</li>
			<li>Baskerville</li>
			<li>Hoefler Text</li>
			<li>Garamond</li>
			<li>Constantia</li>
			<li>Cambria</li>
			<li class="family-custom"><input type="text" name="family-custom" value="your font family" id="family-custom"><span id="family-custom-add">+</span></li>
		</ul>
		
	</div>

<div class="wrap">

	<div id="ff-google-webfonts">
		<h6>Google Web Fonts</h6>
		<div>Loading…</div>
	</div>

	<div id="ff-font-size">
		<h6>Font Size</h6>
		<select data-ff="fontSize">
			<option>10</option>
			<option>11</option>
			<option>12</option>
			<option>14</option>
			<option>16</option>
			<option>18</option>
			<option>21</option>
			<option>24</option>
			<option>36</option>
			<option>48</option>
			<option>60</option>
			<option>72</option>
		</select>
	</div>
	
	<div id="ff-font-weight">
		<h6>Font Weight</h6>
		<select data-ff="fontWeight">
			<option>100</option>
			<option>200</option>
			<option>300</option>
			<option value="400" selected>400 (normal)</option>
			<option>500</option>
			<option>600</option>
			<option value="700">700 (bold)</option>
			<option>800</option>
			<option>900</option>
		</select>
	</div>

	<div id="ff-line-height">
		<h6>Line Height</h6>
		<select data-ff="lineHeight">
			<option>1</option>
			<option>1.1</option>
			<option>1.2</option>
			<option>1.3</option>
			<option>1.4</option>
			<option selected>1.5</option>
			<option>1.6</option>
			<option>1.75</option>
			<option>2</option>
			<option>2.5</option>
			<option>3</option>
		</select>
	</div>
	
	<div id="ff-font-style">
		<h6>Font Style</h6>
		<ul data-ff="fontStyle">
			<li>italic</li>
			<li>normal</li>
		</ul>
	</div>

</div>
	
<div class="wrap">
	<div id="ff-font-face">
		<h6>@font-face</h6>
		<div id="ff-font-drop">Drag a font here.</div>
		<ul data-ff="fontFamily"></ul>
	</div>
	
	
	
	<div id="ff-text-transform">
		<h6>Text Transform</h6>
		<ul data-ff="textTransform">
			<li>uppercase</li>
			<li>lowercase</li>
			<li>capitalize</li>
			<li>none</li>
		</ul>		
	</div>
	
	<div id="ff-font-variant">
		<h6>Font Variant</h6>
		<ul data-ff="fontVariant">
			<li>small-caps</li>
			<li>normal</li>
		</ul>		
	</div>
	
</div>
	
	<div id="ff-controls">
		<div class="left">&larr;</div>
		<div class="right">&rarr;</div>
		<div class="up">&uarr;</div>
		<div class="down">&darr;</div>
	</div>
	
	<div id="ff-credit"><a href="http://somadesign.ca/projects/fontfriend/" title="Soma FontFriend homepage">Soma FontFriend</a></div>
	
	<div id="ff-clear" title="clear all styles">S</div>
	
</div>